<template>
  <el-card>
    <el-row :gutter="8" class="dept-modal-row">
      <el-col :span="5">
        <el-select
          clearable
          @change="handleTypeChange"
          v-model="deptType"
          style="width: 100%"
          class="mb20"
        >
          <el-option label="全部" :value="null" />
          <el-option
            v-for="(item,index) in deptDic"
            :key="index"
            :label="item.title"
            :value="item.key"
          />
        </el-select>
        <x-tree
          ref="xTree"
          :defaultExpandAll="true"
          :treeData="treeData"
          @changeTree="handleChangeTree"
        />
      </el-col>
      <el-col :span="showPanel ? 14 : 19">
        <div class="ofh mb10" style="line-height: 32px">
          <span>
            当前所选部门：
            <span>{{name}}</span>
          </span>
        </div>
        <dept-table ref="deptTable" @edit="handleEdit" @setRole="handleSetRole" />
      </el-col>
      <el-col :span="5" v-show="showPanel">
        <user-role ref="userRole" @refresh="handleRefresh" @changeShowPanel="showPanel = false" />
      </el-col>
    </el-row>
    <dept-modal ref="deptModal" @refresh="handleRefresh" />
  </el-card>
</template>

<script>
import DeptTable from './Table'
// import XTree from '@/components/DeptTree'
import XTree from '@/components/XTree'
import { getDeptTree } from '@/api/department'
import DeptModal from './Modal'
import UserRole from './userRole'
import { getDicData } from '@/utils/util'
import { getDeptTreeByType } from '@/api/department'

export default {
  name: 'DeptMan',
  components: {
    XTree,
    DeptTable,
    DeptModal,
    UserRole
  },
  data() {
    return {
      treeData: [],
      name: '',
      showPanel: false,
      deptDic: [],
      deptType: null
    }
  },
  created() {
    this.deptDic = getDicData('001', '001002')
    this.getDeptTree()
  },
  methods: {
    handleData(arr) {
      let arr1 = [
        {
          title: '部门',
          key: '',
          value: '',
          children: arr
        }
      ]
      this.$nextTick(() => {
        this.treeData = [...arr1]
      })
    },
    getDeptTree() {
      getDeptTree().then(res => {
        this.handleData(res.data)
      })
    },
    async handleTypeChange(value) {
      const res = await getDeptTreeByType({ deptType: value })
      this.handleData(res.data)
    },
    handleRefresh() {
      this.$refs.deptTable.handleGetList()
      this.getDeptTree()
    },
    handleChangeTree(obj) {
      this.name = obj.parentName
      this.$refs.deptTable.getId(obj)
    },
    handleEdit(record) {
      this.$refs.deptModal.edit(record)
    },
    handleSetRole(row) {
      console.log('index row', row)
      this.showPanel = true
      this.$refs.userRole.receiveOneRole(row)
    }
  }
}
</script>